<template>
    <view>
        <view style="padding-bottom: 140rpx">
            <j-cell-group>
                <j-cell-card title="通道" :tips="channel + 1" :show="false" :is-touch="false" border style="background: #f5f7fb">
                    <template v-for="(item, index) in DetectMotionDetectList">
                        <j-cell :key="index" title="1" :more="false" @jftap="bindtapChannel(index)">
                            <view slot="tips" v-if="index === channel">
								<uni-icons custom-prefix="iconfont" type="icon-duihao" size="24" color="#FF0025"></uni-icons>
                            </view>
                        </j-cell>
                    </template>
                </j-cell-card>

                <j-cell title="开启" :more="false">
                    <view slot="tips">
                        <switch :checked="DetectMotionDetectList[channel].Enable" @change="bindchangeEnable"></switch>
                    </view>
                </j-cell>

                <template v-if="DetectMotionDetectList[channel].Enable">
                    <j-cell-card title="灵敏度" :tips="levels[DetectMotionDetectList[channel].Level - 1].name" :show="false" :is-touch="false" border style="background: #f5f7fb">
                        <template v-for="(item, index) in levels">
                            <j-cell :key="index" :title="item.name" :more="false" @jftap="bindchangeLevels(item)">
                                <view slot="tips" v-if="DetectMotionDetectList[channel].Level === levels[index].value">
									<uni-icons custom-prefix="iconfont" type="icon-duihao" size="24" color="#FF0025"></uni-icons>
                                </view>
                            </j-cell>
                        </template>
                    </j-cell-card>

                    <j-cell title="区域块" :tips="DetectMotionDetectList[channel].Region" :more="false"></j-cell>

                    <j-cell-card title="动态检测联动" :show="false" :is-touch="false" border style="background: #f5f7fb">
                        <!-- <j-cell title="布撤防时间段" tips="{{DetectMotionDetectList[channel].EventHandler.TimeSection}}" more="{{false}}"></j-cell> -->
                        <j-cell-card title="布撤防时间段" :show="false" :is-touch="false" border style="background: #f5f7fb">
                            <view style="border-bottom: 1px solid #eeeeee">
                                <picker :value="week" :range="weeks" @change="bindchangeWeeks">
                                    <view style="display: flex; justify-content: space-between; align-items: center; background: #ffffff; padding: 20rpx">
                                        <view>星期</view>
                                        <view>{{ weeks[week] }}</view>
                                    </view>
                                </picker>
                            </view>
                            <view
                                style="border-bottom: 1px solid #eeeeee; display: flex; flex-direction: row; justify-content: space-between; align-items: center"
                                v-for="(item, index) in timeMaskList"
                                :key="index"
                            >
                                <view style="width: 60rpx">
                                    <checkbox :checked="false"></checkbox>
                                </view>

                                <picker mode="multiSelector" :value="item" :range="[hours, minutes, hours, minutes]" @change="bindchangeTime($event,index)">
                                    <view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx">
                                        <view>时间段{{ index + 1 }}：</view>
                                        <view>{{ hours[item[0]] }}:{{ minutes[item[1]] }} -- {{ hours[item[2]] }}:{{ minutes[item[3]] }}</view>
                                    </view>
                                </picker>
                            </view>
                        </j-cell-card>

                        <j-cell title="间隔" :more="false">
                            <view slot="tips" style="display: flex; align-items: center">
                                <input :value="DetectMotionDetectList[channel].EventHandler.EventLatch" type="number" class="input-control" @input="bindinputEventLatch" />
                                <text style="padding: 0 20rpx">秒</text>
                            </view>
                        </j-cell>

                        <j-cell title="录像通道" :more="false">
                            <view slot="tips">
                                <switch :checked="DetectMotionDetectList[channel].EventHandler.RecordEnable" @change="bindchangeRecordEnable"></switch>
                            </view>
                        </j-cell>
                        <template v-if="DetectMotionDetectList[channel].EventHandler.RecordEnable">
                            <j-cell title="录像通道掩码" :tips="DetectMotionDetectList[channel].EventHandler.RecordMask" :more="false"></j-cell>
                            <j-cell title="录像延时" :more="false">
                                <view slot="tips" style="display: flex; align-items: center">
                                    <input :value="DetectMotionDetectList[channel].EventHandler.RecordLatch" type="number" class="input-control" @input="bindinputRecordLatch" />
                                    <text style="padding: 0 20rpx">秒</text>
                                </view>
                            </j-cell>
                        </template>

                        <j-cell title="报警输出" :more="false">
                            <view slot="tips">
                                <switch :checked="DetectMotionDetectList[channel].EventHandler.AlarmOutEnable" @change="bindchangeAlarmOutEnable"></switch>
                            </view>
                        </j-cell>
                        <template v-if="DetectMotionDetectList[channel].EventHandler.AlarmOutEnable">
                            <j-cell title="报警输出通道掩码" :tips="DetectMotionDetectList[channel].EventHandler.AlarmOutMask" :more="false"></j-cell>
                            <j-cell title="报警输出延时" :more="false">
                                <view slot="tips" style="display: flex; align-items: center">
                                    <input
                                        :value="DetectMotionDetectList[channel].EventHandler.AlarmOutLatch"
                                        type="number"
                                        class="input-control"
                                        @input="bindinputAlarmOutLatch"
                                    />
                                    <text style="padding: 0 20rpx">秒</text>
                                </view>
                            </j-cell>
                        </template>

                        <j-cell title="云台联动" :more="false">
                            <view slot="tips">
                                <switch :checked="DetectMotionDetectList[channel].EventHandler.PtzEnable" @change="bindchangePtzEnable"></switch>
                            </view>
                        </j-cell>
                        <template v-if="DetectMotionDetectList[channel].EventHandler.PtzEnable">
                            <j-cell title="云台联动设置" :tips="DetectMotionDetectList[channel].EventHandler.PtzLink" :more="false"></j-cell>
                        </template>

                        <j-cell title="轮询" :more="false">
                            <view slot="tips">
                                <switch :checked="DetectMotionDetectList[channel].EventHandler.TourEnable" @change="bindchangeTourEnable"></switch>
                            </view>
                        </j-cell>
                        <template v-if="DetectMotionDetectList[channel].EventHandler.TourEnable">
                            <j-cell title="轮询掩码" :tips="DetectMotionDetectList[channel].EventHandler.TourMask" :more="false"></j-cell>
                        </template>

                        <j-cell title="抓图" :more="false">
                            <view slot="tips">
                                <switch :checked="DetectMotionDetectList[channel].EventHandler.SnapEnable" @change="bindchangeSnapEnable"></switch>
                            </view>
                        </j-cell>
                        <template v-if="DetectMotionDetectList[channel].EventHandler.SnapEnable">
                            <j-cell title="抓图通道号掩码" :tips="DetectMotionDetectList[channel].EventHandler.SnapShotMask" :more="false"></j-cell>
                        </template>

                        <j-cell title="联动视频矩阵" :more="false">
                            <view slot="tips">
                                <switch :checked="DetectMotionDetectList[channel].EventHandler.MatrixEnable" @change="bindchangeMatrixEnable"></switch>
                            </view>
                        </j-cell>
                        <template v-if="DetectMotionDetectList[channel].EventHandler.MatrixEnable">
                            <j-cell title="联动视频矩阵通道掩码" :tips="DetectMotionDetectList[channel].EventHandler.MatrixMask" :more="false"></j-cell>
                        </template>

                        <j-cell title="本地消息框提示" :more="false">
                            <view slot="tips">
                                <switch :checked="DetectMotionDetectList[channel].EventHandler.TipEnable" @change="bindchangeTipEnable"></switch>
                            </view>
                        </j-cell>

                        <j-cell title="发送邮件" :more="false">
                            <view slot="tips">
                                <switch :checked="DetectMotionDetectList[channel].EventHandler.MailEnable" @change="bindchangeMailEnable"></switch>
                            </view>
                        </j-cell>

                        <j-cell title="App推送" :more="false">
                            <view slot="tips">
                                <switch :checked="DetectMotionDetectList[channel].EventHandler.MessageEnable" @change="bindchangeMessageEnable"></switch>
                            </view>
                        </j-cell>

                        <j-cell title="消息上传到网络" :more="false">
                            <view slot="tips">
                                <switch :checked="DetectMotionDetectList[channel].EventHandler.MsgtoNetEnable" @change="bindchangeMsgtoNetEnable"></switch>
                            </view>
                        </j-cell>

                        <j-cell title="报警声" :more="false">
                            <view slot="tips">
                                <switch :checked="DetectMotionDetectList[channel].EventHandler.BeepEnable" @change="bindchangeBeepEnable"></switch>
                            </view>
                        </j-cell>

                        <j-cell title="语音提示" :more="false">
                            <view slot="tips">
                                <switch :checked="DetectMotionDetectList[channel].EventHandler.VoiceEnable" @change="bindchangeVoiceEnable"></switch>
                            </view>
                        </j-cell>
                        <template v-if="DetectMotionDetectList[channel].EventHandler.VoiceEnable">
                            <j-cell title="语音提示类型" :tips="DetectMotionDetectList[channel].EventHandler.VoiceType" :more="false"></j-cell>
                        </template>

                        <j-cell title="写日志" :more="false">
                            <view slot="tips">
                                <switch :checked="DetectMotionDetectList[channel].EventHandler.LogEnable" @change="bindchangeLogEnable"></switch>
                            </view>
                        </j-cell>

                        <j-cell title="Ftp上传" :more="false">
                            <view slot="tips">
                                <switch :checked="DetectMotionDetectList[channel].EventHandler.FtpEnable" @change="bindchangeFtpEnable"></switch>
                            </view>
                        </j-cell>
                    </j-cell-card>
                </template>
            </j-cell-group>
        </view>

        <view class="bottom-fixed">
            <button type="primary" class="block" plain @tap="bindtapSave">保存</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            token: '',
            DetectMotionDetectList: [],
            channel: 0,

            levels: [
                {
                    value: 1,
                    name: '最低'
                },
                {
                    value: 2,
                    name: '较低'
                },
                {
                    value: 3,
                    name: '中'
                },
                {
                    value: 4,
                    name: '较高'
                },
                {
                    value: 5,
                    name: '很高'
                },
                {
                    value: 6,
                    name: '最高'
                }
            ],

            weeks: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '全部'],
            week: 0,
            hours: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],
            minutes: [
                '00',
                '01',
                '02',
                '03',
                '04',
                '05',
                '06',
                '07',
                '08',
                '09',
                '10',
                '11',
                '12',
                '13',
                '14',
                '15',
                '16',
                '17',
                '18',
                '19',
                '20',
                '21',
                '22',
                '23',
                '24',
                '25',
                '26',
                '27',
                '28',
                '29',
                '30',
                '31',
                '32',
                '33',
                '34',
                '35',
                '36',
                '37',
                '38',
                '39',
                '40',
                '41',
                '42',
                '43',
                '44',
                '45',
                '46',
                '47',
                '48',
                '49',
                '50',
                '51',
                '52',
                '53',
                '54',
                '55',
                '56',
                '57',
                '58',
                '59'
            ],
            timeMaskList: [],
            EventLatch: '',
            RecordEnable: '',
            RecordMask: '',
            RecordLatch: '',
            AlarmOutEnable: '',
            AlarmOutMask: '',
            AlarmOutLatch: '',
            PtzEnable: '',
            PtzLink: '',
            TourEnable: '',
            TourMask: '',
            SnapEnable: '',
            SnapShotMask: '',
            MatrixEnable: '',
            MatrixMask: '',
            TipEnable: '',
            MailEnable: '',
            MessageEnable: '',
            MsgtoNetEnable: '',
            BeepEnable: '',
            VoiceEnable: '',
            VoiceType: '',
            LogEnable: '',
            FtpEnable: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
		this.token = options.token
		this.week = new Date().getDay()
		this.getconfig();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getconfig() {
            uni.showLoading();
            let token = this.token;
            let data = {
                Name: 'Detect.MotionDetect'
            };
            getApp().globalData.api.getconfig(data, token, (result) => {
                uni.hideLoading({
                    success: (res) => {
                        console.log(result);
						this.DetectMotionDetectList = result['Detect.MotionDetect']
						if (this.week <= 6) {
							this.TimeSectionMaskTo(this.week);
						} else {
							for (let i = 0; i < 7; i++) {
								this.TimeSectionMaskTo(i);
							}
						}
                    }
                });
            });
        },

        // 通道
        bindtapChannel(ev) {
            this.channel = Number(ev);
			this.getconfig();
        },

        // 是否开启移动侦测
        bindchangeEnable(ev) {
            this.DetectMotionDetectList[this.channel].Enable = ev.detail.value;
        },

        // 灵敏度
        bindchangeLevels(ev) {
            this.DetectMotionDetectList[this.channel].Level = Number(ev.value);
        },

        // 星期
        bindchangeWeeks(ev) {
			this.week = Number(ev.detail.value)
			this.TimeSectionMaskTo(this.week);
        },

        // 时间段
        bindchangeTime(ev,index) {
            // let index = index
            let value = ev.detail.value;

            for (let i = 0; i < this.timeMaskList.length; i++) {
                if (i === index) {
                    this.timeMaskList[i] = value;
                    break;
                }
            }
			
			if (this.week <= 6) {
			    this.ToTimeSectionMask(this.week);
			} else {
			    for (let i = 0; i < 7; i++) {
			        this.ToTimeSectionMask(i);
			    }
			}
        },

        // 间隔
        bindinputEventLatch(ev) {
            this.DetectMotionDetectList[this.channel].EventHandler.EventLatch = Number(ev.detail.value);
        },

        // 录像通道是否启用
        bindchangeRecordEnable(ev) {
            this.DetectMotionDetectList[this.channel].EventHandler.RecordEnable = ev.detail.value;
        },

        // 录像延时
        bindinputRecordLatch(ev) {
            this.DetectMotionDetectList[this.channel].EventHandler.RecordLatch = Number(ev.detail.value);
        },

        // 报警输出是否启用
        bindchangeAlarmOutEnable(ev) {
            this.DetectMotionDetectList[this.channel].EventHandler.AlarmOutEnable = ev.detail.value;
        },

        // 报警输出延时
        bindinputAlarmOutLatch(ev) {
            this.DetectMotionDetectList[this.channel].EventHandler.AlarmOutLatch = Number(ev.detail.value);
        },

        // 云台联动是否启用
        bindchangePtzEnable(ev) {
            this.DetectMotionDetectList[this.channel].EventHandler.PtzEnable = ev.detail.value;
        },

        // 轮询是否启用
        bindchangeTourEnable(ev) {
            this.DetectMotionDetectList[this.channel].EventHandler.TourEnable = ev.detail.value;
        },

        // 抓图是否启用
        bindchangeSnapEnable(ev) {
            this.DetectMotionDetectList[this.channel].EventHandler.SnapEnable = ev.detail.value;
        },

        // 联动视频矩阵是否启用(APP推送)
        bindchangeMatrixEnable(ev) {
            this.DetectMotionDetectList[this.channel].EventHandler.MatrixEnable = ev.detail.value;
        },

        // 本地消息框提示是否启用
        bindchangeTipEnable(ev) {
            this.DetectMotionDetectList[this.channel].EventHandler.TipEnable = ev.detail.value;
        },

        // 发送邮件是否启用
        bindchangeMailEnable(ev) {
            this.DetectMotionDetectList[this.channel].EventHandler.MailEnable = ev.detail.value;
        },

        // 上传到报警服务器是否启用
        bindchangeMessageEnable(ev) {
            this.DetectMotionDetectList[this.channel].EventHandler.MessageEnable = ev.detail.value;
        },

        // 消息上传到网络是否启用
        bindchangeMsgtoNetEnable(ev) {
            this.DetectMotionDetectList[this.channel].EventHandler.MsgtoNetEnable = ev.detail.value;
        },

        // 报警声是否启用
        bindchangeBeepEnable(ev) {
            this.DetectMotionDetectList[this.channel].EventHandler.BeepEnable = ev.detail.value;
        },

        // 语音提示是否启用
        bindchangeVoiceEnable(ev) {
            this.DetectMotionDetectList[this.channel].EventHandler.VoiceEnable = ev.detail.value;
        },

        // 写日志是否启用
        bindchangeLogEnable(ev) {
            this.DetectMotionDetectList[this.channel].EventHandler.LogEnable = ev.detail.value;
        },

        // Ftp上传是否启用
        bindchangeFtpEnable(ev) {
            this.DetectMotionDetectList[this.channel].EventHandler.FtpEnable = ev.detail.value;
        },

        bindtapSave(ev) {
            console.log(this.DetectMotionDetectList);
            this.setconfig();
        },

        // 设置配置
        setconfig() {
            uni.showLoading();
            let token = this.token;
            let data = {
                Name: 'Detect.MotionDetect',
                'Detect.MotionDetect': this.DetectMotionDetectList
            };
            getApp().globalData.api.setconfig(data, token, (result) => {
                uni.showToast({
                    title: '保存成功'
                });
            });
        },

        /** ================================================ TimeSection 的转换 ===================================================== */
        // 传参转本地
        TimeSectionMaskTo(week) {
            let record = this.DetectMotionDetectList[this.channel]; // 获取某通道数据

            let timeSectionList = record.EventHandler.TimeSection; // TimeSection集合

            let timeSectionArray = timeSectionList[week]; // 星期几的TimeSection（6个时间段）

            let timeMaskList = [];
            timeSectionArray.forEach((item, index) => {
                let timeArray = this.TimeSectionTo(item);
                timeMaskList.push(timeArray);
            });
            this.timeMaskList = timeMaskList
            console.log(this.timeMaskList);
        },

        // 本地转传参
        ToTimeSectionMask(week) {
            let timeArray = [];
            this.timeMaskList.forEach((item, index) => {
                if (index === 0) {
                    timeArray.push('1 ' + this.ToTimeSection(item));
                } else {
                    timeArray.push('0 ' + this.ToTimeSection(item));
                }
            });
            this.DetectMotionDetectList[this.channel].EventHandler.TimeSection[week] = timeArray;
        },

        // 返回的时间格式转换为本地时间格式
        TimeSectionTo(str) {
            let arr1 = str.split(' ');
            let prefix = arr1[0];
            let suffix = arr1[1];
            let arr2 = suffix.split('-');
            let start = arr2[0];
            let end = arr2[1];
            let arr3 = start.split(':');
            let startHour = arr3[0];
            let startMinute = arr3[1];
            let startSecond = arr3[2];
            let arr4 = end.split(':');
            let endHour = arr4[0];
            let endMinute = arr4[1];
            let endSecond = arr4[2];
            let timeArray = [];

            for (let i = 0; i < this.hours.length; i++) {
                const item = this.hours[i];

                if (item === startHour) {
                    timeArray.push(i);
                }
            }

            for (let i = 0; i < this.minutes.length; i++) {
                const item = this.minutes[i];

                if (item === startMinute) {
                    timeArray.push(i);
                }
            }

            for (let i = 0; i < this.hours.length; i++) {
                const item = this.hours[i];

                if (item === endHour) {
                    timeArray.push(i);
                }
            }

            for (let i = 0; i < this.minutes.length; i++) {
                const item = this.minutes[i];

                if (item === endMinute) {
                    timeArray.push(i);
                }
            }

            return timeArray;
        },

        // 本地时间格式转换为参数需要的时间格式
        ToTimeSection(timeArray) {
            let str = '';
            let startHour = this.hours[timeArray[0]];
            let startMinute = this.minutes[timeArray[1]];
            let endHour = this.hours[timeArray[2]];
            let endMinute = this.minutes[timeArray[3]];
            str = startHour + ':' + startMinute + ':00-' + endHour + ':' + endMinute + ':00';
            return str;
        }
    }
};
</script>
<style></style>
